import "./BodyMenu.scss";

import tpl from "./BodyMenu.html";
import {Component} from "vue";

export namespace BodyMenu {
    export interface MenuItem {
        text: string;
        action: string;
    }
}

const menuGroupList = [
    [
        {
            text: "新增卡片",
            action: "addCard",
        },
        {
            text: "新增组",
            action: "addGroup",
        },
    ],
    [
        {
            text: "开/关设置",
            action: "toggleSettingPanel"
        }
    ],
];

const bodyMenu: Component = {
    name: "bodyMenu",
    template: tpl,
    data() {
        return {
            menuGroupList,
            isShow: false,
            top: 0,
            left: 0,
        };
    },
    computed: {
        menuStyle() {
            return this.getMenuStyle();
        },
    },
    methods: {
        getMenuStyle() {
            const style: Partial<CSSStyleDeclaration> = {};
            style.top = this.top + "px";
            style.left = this.left + "px";
            return style;
        },
        onClickMenu(item: BodyMenu.MenuItem) {
            this.$emit("click_action", item);
            this.closeMenu();
        },
        openMenu(evt: MouseEvent) {
            this.top = evt.clientY;
            this.left = evt.clientX;
            this.isShow = true;
        },
        closeMenu() {
            this.isShow = false;
        },
    },
}

export default bodyMenu;
